<template>
  <div class="common-layout">
    <el-container class="app">
      <!-- 上面部分 -->
      <el-header class="head">
        <el-button plain class="btn" @click="$router.push('/login')">退出</el-button>
      </el-header>

      <!-- 下面部分 -->
      <el-container>
        <el-aside width="200px">
          <el-menu default-active="2" class="left-menu" router>
            <!-- 一级目录  -->
            <el-menu-item index="/">
              <el-icon><House /></el-icon>
              <span>首页</span>
            </el-menu-item>

            <!-- 一级目录  -->
            <el-menu-item index="/user">
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </el-menu-item>

            <!-- 二级目录 -->
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>商品管理</span>
              </template>
              <!-- 二级菜单的内容 -->
              <el-menu-item index="/prolist">商品列表分类</el-menu-item>
              <el-menu-item index="/proadd">新增商品分类</el-menu-item>
              <el-menu-item index="/pro">商品列表</el-menu-item>
              <el-menu-item index="/add">发布商品</el-menu-item>
              <el-menu-item index="/comment">商品评论</el-menu-item>

              <!-- 三级菜单 -->
              <!-- <el-sub-menu index="1-4">
                <template #title>item four</template>
                <el-menu-item index="1-4-1">item one</el-menu-item>
              </el-sub-menu> -->
            </el-sub-menu>

            <!-- 一级目录  -->
            <el-sub-menu index="/lunbo">
              <template #title>
                <el-icon><setting /></el-icon>
                <span>轮播图管理</span>
              </template>
              <!-- 二级菜单的内容 -->
              <el-menu-item index="/lunboadd">新增轮播图</el-menu-item>
            </el-sub-menu>

            <!-- --------------------------------------- -->
            <!-- 一级目录  -->
            <el-menu-item index="/notice">
              <el-icon><Bell /></el-icon>
              <span>公告管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main class="main">
          <!-- 右侧主体 会根据地址发生改变 -->
          <!-- 创建页面组件 -- 首页 -- 商品列表 -- 商品发布 -->
          <!-- 配置路由-layout里面的路由规则-嵌套路由--去layout的children里面配置 -->
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
let router = useRouter
</script>

<style lang="css" scoped>
.left-menu {
  height: 100vh;
}
.common-layout {
  height: 100vh;
}
.app {
  height: 100%;
}
.head {
  background-color: rgb(3, 21, 39);
  color: #fff;
}
.btn {
  margin-top: 15px;
  margin-left: 10px;
}
.main {
  background-color: #fafafa;
}
</style>
